<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React antd 学习!</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.production.min.js"></script>


    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.4/moment.min.js"></script>

    <script src="https://cdn.bootcss.com/react-router/4.2.0/react-router.js"></script>
    <script src="https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.js"></script>
    <link href="https://cdn.bootcss.com/antd/3.0.3/antd.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/antd/3.0.3/antd.min.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <!--
    -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>


</head>
<body>
<div id="root"></div>
<script type="text/babel">
    var mountNode = document.getElementById('root');
    const { Layout, Menu, Icon } = antd;
    const { BrowserRouter, Route, Link, Switch} = ReactRouterDOM;
    const Router = BrowserRouter;

    const SubMenu = Menu.SubMenu;
    const MenuItem = Menu.Item;
    {/*

    class myIntroduce extends React.Component{
        render() {
            console.log('sfadf');
            return (
                <div>
                    Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
                </div>
            );
        }
    }
*/}
    class MyIntroduce extends React.Component{
        render(){
            return (
                <div>
                    Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
                </div>
            )
        }
    }

    class MyTable extends React.Component{
        render(){
            return (
                <div>
                    表格页面
                </div>
            )
        }
    }

    class MyForm extends React.Component{
        render(){
            return (
                <div>
                    表单
                </div>
            )
        }
    }


    // 配置导航
    class Sider extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                current: '0',
                username: ''
            };
        }

        handleClick(e) {
            this.setState({
                current: e.key
            });
        }


        componentDidMount() {
            this.setState({
                username: 'yikun'
            });
        }

        render() {
            return (
                <div style={{ display: 'flex' }}>
                    <div id="leftMenu">
                        <img src='src/images/logo.png' width="50" id="logo"/>
                        <Menu theme="dark"
                              onClick={this.handleClick.bind(this)}
                              style={{ width: 200 }}
                              defaultOpenKeys={['sub1', 'sub2']}
                              defaultSelectedKeys={[this.state.current]}
                              mode="inline"
                        >
                            <Menu.Item key="0"><Link to="/myIntroduce"><Icon type="mail" />我没有子菜单</Link></Menu.Item>
                            <SubMenu key="sub1" title={<span><Icon type="bars" /><span>主导航</span></span>}>
                                <Menu.Item key="1"><Link to="/myTable">表格</Link></Menu.Item>
                                <Menu.Item key="2"><Link to="/myForm">表单</Link></Menu.Item>
                            </SubMenu>
                        </Menu>
                    </div>
                    <div id="rightWrap" style={{ flex: 1, padding: '10px' }}>
                        <Menu mode="horizontal">
                            <SubMenu title={<span><Icon type="user" />{ this.state.username }</span>}>
                                <Menu.Item key="setting:1">退出</Menu.Item>
                            </SubMenu>
                        </Menu>
                        <div className="right-box">
                            { this.props.children }
                        </div>
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Router  >
            <Sider>
                <Route path="/myIntroduce" component={MyIntroduce} />
                <Route path="/myTable" component={MyTable} />
                <Route path="/myForm" component={MyForm} />
            </Sider>
        </Router>

        , mountNode);
</script>
</body>
</html>